<template>
  <view>
    <view class="example">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms ref="baseForm" :modelValue="baseFormData" label-position="top">
        <uni-forms-item label="店铺名称" required>
          <uni-easyinput
            v-model="baseFormData.name"
            placeholder="请输入店铺名称"
          />
        </uni-forms-item>
        <uni-forms-item label="店铺LOGO" required>
          <view class="head-pic">
            <button open-type="chooseAvatar" @chooseavatar="bindchooseavata">
              <image
                :src="
                  adminImgPath + baseFormData.logo_image || '/static/add.png'
                "
                alt=""
                mode="aspectFill"
              ></image>
              <view style="flex: 1"></view>
            </button>
          </view>
        </uni-forms-item>
        <uni-forms-item label="营业状态" required>
          <!-- {{ baseFormData.business_status }} -->
          <uni-data-checkbox
            v-model="baseFormData.business_status"
            :localdata="classificationList"
          />
        </uni-forms-item>

        <uni-forms-item label="店铺地址" required>
          <uni-easyinput
            v-model="baseFormData.address"
            placeholder="请输入店铺地址"
          />
        </uni-forms-item>

        <uni-forms-item label="店铺简介" required>
          <uni-easyinput
            type="textarea"
            v-model="baseFormData.introduction"
            placeholder="请输入商品介绍"
          />
        </uni-forms-item>
        <uni-forms-item label="开始营业时间 " required>
          <view>
            <uni-easyinput
              v-model="timeItme"
              placeholder="请选择时间"
              @focus="show"
            />
            <tpf-time-range
              ref="time"
              :startTime="startTime"
              :startDefaultTime="startDefaultTime"
              :endTime="endTime"
              :endDefaultTime="endDefaultTime"
              @timeRange="timeRange"
            >
            </tpf-time-range>
          </view>
        </uni-forms-item>
      </uni-forms>
      <view class="submit">
        <button type="primary" class="confirm-world" @click="getTemplateId">
          确认
        </button>
      </view>
    </view>
  </view>
</template>
  <script>
var app = getApp();
export default {
  data() {
    return {
      adminImgPath: getApp().globalData.adminImgPath,
      startTime: "00:00",
      startDefaultTime: "06:00",
      endTime: "24:00",
      endDefaultTime: "06:00",
      timeItme: "",
      // 表单
      baseFormData: {
        name: "",
        logo_image: "",
        business_status: "",
        introduction: "",
        business_hours_start_times: "",
        business_hours_end_times: "",
        address: ""  // 新增地址字段
      },
      // 分类，添加模拟数据
      classificationList: [
        {
          value: 1,
          text: "营业中",
        },
        {
          value: 2,
          text: "休息中",
        },
      ],
    };
  },
  onLoad(options) {
    if (options.orderData) {
      this.baseFormData = JSON.parse(decodeURIComponent(options.orderData));
      console.log(this.baseFormData, "this.baseFormData");
      this.timeItme =
        this.baseFormData.business_hours_start_times +
        "-" +
        this.baseFormData.business_hours_end_times;

      this.baseFormData.business_status = parseFloat(
        this.baseFormData.business_status
      );
    }
  },
  methods: {
    show() {
      this.$refs["time"].open();
    },
    timeRange(e) {
      this.baseFormData.business_hours_start_times = e[0];
      this.baseFormData.business_hours_end_times = e[1];
      this.timeItme = e[0] + "-" + e[1];
    },
    // 提交数据
    getTemplateId: function () {
      
      if (this.baseFormData.name == "") {
        uni.showToast({
          title: "请输入店铺名称",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (this.baseFormData.logo_image == "") {
        uni.showToast({
          title: "请上传店铺LOGO",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (this.baseFormData.business_status == "") {
        uni.showToast({
          title: "请选择营业状态",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      if (this.baseFormData.address == "") {
        uni.showToast({
          title: "请输入店铺地址",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      
      if (this.baseFormData.introduction == "") {
        uni.showToast({
          title: "请输入店铺简介",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (
        this.baseFormData.business_hours_start_times == "" ||
        this.baseFormData.business_hours_end_times == ""
      ) {
        uni.showToast({
          title: "请选择营业时间",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      const _this = this;

      // 显示加载提示
      uni.showLoading({
        mask: true,
      });
      let path;
      let data = { ...this.baseFormData };
      data.business_status = data.business_status + "";
      data.logo_image = data.logo_image.replace(/^(?:https?:\/\/)?[^\/]+/, "");
      path = app.globalData.adminPath + "/xyb/business/baseInfo";
      uni.request({
        url: path,
        method: "POST",
        data: data,
        header: {
          token: uni.getStorageSync("local_user_session"),
        },
        success: function (res) {
          if (res.data.code == 0) {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: "添加成功",
              icon: "none",
              duration: 3000,
            });
            // 添加返回上一页的逻辑
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          }
        },
        fail: function (err) {
          console.error("请求失败:", err);
        },
        complete: function () {
          // 隐藏加载提示
        },
      });
    },
    // 上传商品图片
    bindchooseavata: function (val) {
      console.log(val.detail.avatarUrl, "val.detail.avatarUrl");
      uni.showLoading({
        title: "上传中",
        mask: true,
      });
      uni.uploadFile({
        url: app.globalData.adminPath + "/common/upload",
        filePath: val.detail.avatarUrl,
        name: "file",
        formData: {
          token: uni.getStorageSync("local_user_session"),
        },
        success: (uploadFileRes) => {
          if (uploadFileRes.code == 401) {
            console.log(uni.getStorageSync("local_user_session"));
          } else {
            const url =
              app.globalData.adminImgPath +
              JSON.parse(uploadFileRes.data).data.url;
            this.baseFormData.logo_image = url.replace(
              /^(?:https?:\/\/)?[^\/]+/,
              ""
            );
          }
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
  },
};
</script>
  <style lang="scss">
::v-deep .uni-forms-item__label text {
  white-space: nowrap;
}

::v-deep .button-sp-area {
  display: flex;
  flex-wrap: wrap;

  button {
    margin: 10rpx;
  }
}

.example {
  padding: 30rpx;
  background-color: #fff;

  .segmented-control {
    margin-bottom: 30rpx;
  }

  .submit {
    display: flex;
    justify-content: center;

    .confirm-world {
      color: #fff;
      background: #ffc045;
      border-radius: 44rpx;
      width: 100%;
    }

    .confirm-world::after {
      border: none;
    }
  }

  .button-group {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
  }

  .button {
    display: flex;
    align-items: center;
    height: 70rpx;
    margin-left: 20rpx;
  }

  .head-pic {
    button {
      overflow: hidden;
      // display: flex;
      text-align: left;
      padding: 0;
      margin: 0;
      height: 120rpx;
      background-color: #fff;
    }

    button::after {
      border: none;
    }

    image {
      overflow: hidden;
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>
  